<template>
  <div class="container">
    <!-- 棋盘 -->
    <div class="camera">
      <div class="map" :style="`top:0px;left:0px`">
        <div
          v-for="(item, index) in mapList"
          :key="index"
          class="map-cube"
          @mouseover="showHover = item.address_id"
          @mouseout="showHover = null"
          :style="`top:${item.top}px;left:${item.left}px;width:${item.size}px;height:${item.size}px`"
          @click="item.pass"
        >
          <div class="cube-box">
            <div class="title">{{ item.address_name }}</div>
            <van-icon
              class="iconFont cube"
              class-prefix="icon"
              :class="item.land_image"
            />
          </div>
          <div
            v-show="showHover == item.address_id"
            :style="item.hoverStyle"
            class="map-hover"
          >
            <magicCard :cardDetail="item.cardDetail" />
          </div>
        </div>
      </div>
      <div
        v-for="(item, index) in playerContral"
        :key="index"
        :style="getPlayerStyleByItem(item)"
        class="player"
      >
        {{ item.name[0] }}
      </div>
      <div class="center-box" :style="centerStyle()">
        <div class="center-inner-box">
          <div
            class="center-item"
            v-for="(item, index) in gameInfo.historyInfo"
            :key="index"
          >
            {{ item.str }}
          </div>
        </div>
      </div>
    </div>
    <!-- 玩家面板 -->
    <div class="ui-box" :style="`left:${mapConfig.size + 80}px`">
      <div class="player-box">
        <div class="left-side">
          <div class="navbar">
            <div class="avatar-box">
              <img
                class="avatar"
                :src="
                  require(`../../assets/images/pic/00${
                    gameInfo.player_id + 1
                  }.jpeg`)
                "
              />
            </div>
            <div class="name-box">
              {{ playerContral[gameInfo.player_id].name }}
            </div>
            <div class="dice-box">
              <img
                @click="handlerMove"
                class="dice-img"
                :src="diceImage"
                alt=""
              />
            </div>
          </div>
          <div class="info-box">
            <div>金钱：{{ playerContral[gameInfo.player_id].money }}</div>
            <div>
              城池：{{ getLandStr(playerContral[gameInfo.player_id].land) }}
            </div>
            <div>
              武将：{{ getStr_1(playerContral[gameInfo.player_id].general) }}
            </div>
            <div>
              计谋：{{ getStr_2(playerContral[gameInfo.player_id].stratagem) }}
            </div>
            <div>
              指挥：{{ getStr_3(playerContral[gameInfo.player_id].command) }}
            </div>
          </div>
        </div>
        <div class="right-side">
          <div class="operate-box">
            <div
              v-for="(item, index) in operateList"
              :key="index"
              class="operate-item"
              @click="handlerClickOperateBtn(item)"
              :class="{
                'actived-btn': item.status == 1,
                'disabled-btn': item.status == 2,
              }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 游戏菜单 -->
    <div v-if="showMenu" class="menu-box">
      <div class="menu-item">
        <div class="item-li">
          <div class="li-title">游玩人数</div>
          <div
            @click="clickSelectBtn(1, 2)"
            :class="gameStartSetting.player_num == 2 ? 'selected' : ''"
            class="li-select"
          >
            2
          </div>
          <div
            @click="clickSelectBtn(1, 3)"
            :class="gameStartSetting.player_num == 3 ? 'selected' : ''"
            class="li-select"
          >
            3
          </div>
          <div
            @click="clickSelectBtn(1, 4)"
            :class="gameStartSetting.player_num == 4 ? 'selected' : ''"
            class="li-select"
          >
            4
          </div>
        </div>
        <div class="start-btn" @click="gameStart">开始游戏</div>
      </div>
    </div>
    <!-- 战斗界面 -->
    <div v-if="showBattle" class="battle-box">
      <div class="battle-item item-1">
        <div class="card-1"></div>
        <div class="card-1"></div>
      </div>
      <div class="battle-item item-2 flex-row">
        <div class="card-list flex-col">
          <div class="card-2"></div>
          <div class="card-2"></div>
          <div class="card-2"></div>
        </div>
        <div class="card-list flex-col">
          <div class="card-2"></div>
          <div class="card-2"></div>
          <div class="card-2"></div>
        </div>
      </div>
      <!-- <div class="battle-item item-2"></div>
      <div class="battle-item item-1">
        <div class="card-1"></div>
        <div class="card-1"></div>
      </div> -->
      <div class="battle-set">
        <div class="set-list-1">
          <div class="list-title">武将</div>
          <div v-for="(item, index) in list_1" :key="index" class="card"></div>
        </div>
        <div class="set-list-1">
          <div class="list-title">指挥</div>
          <div v-for="(item, index) in list_2" :key="index" class="card"></div>
        </div>
        <div class="set-list-1">
          <div class="list-title">计谋</div>
          <div v-for="(item, index) in list_3" :key="index" class="card"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  drawCard,
  getCardInfo,
  resetList,
  queryListAll,
  setBaseCard,
} from "@/utils/monopoly";
import magicCard from "@/components/magicCard/index.vue";
export default {
  components: { magicCard },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
    // this.handlerMove();
    /**
     * 资源加载
     * 1地图绘制信息
     * 2玩家数据
     * 3领地数据
     * 4领地方法
     * 5领地数据
     * 6武将数据
     * 7战法数据
     * 8计谋数据
     * 9政策数据
     */
    //初始化
    this.init();
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {},
  beforeUpdate() {
    // console.log("beforeUpdate");
  },
  updated() {
    // console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
  data() {
    let _this = this;
    return {
      mapConfig: {
        size: 0, // 地图边
        width: 0,
        height: 0,
        cube: 0, //格子
      },
      //地图方法 停留 经过
      mapFunctionList: [
        {
          pass: function (value) {
            console.log(value, "pass0");
          },
          stop: function (value) {
            console.log(value, "stop0");
            //1购买2升级3付钱/攻城
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[0];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 0,
        },
        {
          pass: function (value) {
            console.log(_this.isMoving, "pass1");
          },
          stop: function (value) {
            console.log(value, "stop1");
            _this.isMoving = false;
            _this.setOperate(4);
          },
          index: 1,
        },
        {
          pass: function (value) {
            console.log(_this.isMoving, "pass02");
          },
          stop: function (value) {
            console.log(value, "stop02");
            //1购买2升级3付钱/攻城
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[2];
            //展示操作按钮
            //购买/升级/缴钱/攻城/结束
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 2,
        },
        {
          pass: function (value) {
            console.log(value, "pass03");
            // this.stop();
          },
          stop: function (value) {
            console.log(value, "stop03");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[3];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 3,
        },
        {
          pass: function (value) {
            console.log(value, "pass04");
          },
          stop: function (value) {
            console.log(value, "stop04");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[4];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 4,
        },
        {
          pass: function (value) {
            console.log(value, "pass05");
          },
          stop: function (value) {
            console.log(value, "stop05");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[5];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 5,
        },
        {
          pass: function (value) {
            console.log(value, "pass06");
          },
          stop: function (value) {
            console.log(value, "stop06");
            _this.isMoving = false;
            _this.setOperate(5);
          },
          index: 6,
        },
        {
          pass: function (value) {
            console.log(value, "pass07");
          },
          stop: function (value) {
            console.log(value, "stop07");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[7];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 7,
        },
        {
          pass: function (value) {
            console.log(value, "pass08");
          },
          stop: function (value) {
            console.log(value, "stop08");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[8];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 8,
        },
        {
          pass: function (value) {
            console.log(value, "pass09");
          },
          stop: function (value) {
            console.log(value, "stop09");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[9];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 9,
        },
        {
          pass: function (value) {
            console.log(value, "pass10");
          },
          stop: function (value) {
            console.log(value, "stop10");
            _this.isMoving = false;
            _this.setOperate(4);
          },
          index: 10,
        },
        {
          pass: function (value) {
            console.log(value, "pass11");
          },
          stop: function (value) {
            console.log(value, "stop11");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[11];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 11,
        },
        {
          pass: function (value) {
            console.log(value, "pass12");
          },
          stop: function (value) {
            console.log(value, "stop12");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[12];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 12,
        },
        {
          pass: function (value) {
            console.log(value, "pass13");
          },
          stop: function (value) {
            console.log(value, "stop13");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[13];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 13,
        },
        {
          pass: function (value) {
            console.log(value, "pass14");
          },
          stop: function (value) {
            console.log(value, "stop14");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[14];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 14,
        },
        {
          pass: function (value) {
            console.log(value, "pass15");
          },
          stop: function (value) {
            console.log(value, "stop15");
            _this.isMoving = false;
            _this.setOperate(5);
          },
          index: 15,
        },
        {
          pass: function (value) {
            console.log(value, "pass16");
          },
          stop: function (value) {
            console.log(value, "stop16");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[16];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 16,
        },
        {
          pass: function (value) {
            console.log(value, "pass17");
          },
          stop: function (value) {
            console.log(value, "stop17");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[17];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 17,
        },
        {
          pass: function (value) {
            console.log(value, "pass18");
          },
          stop: function (value) {
            console.log(value, "stop18");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[18];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 18,
        },
        {
          pass: function (value) {
            console.log(value, "pass19");
          },
          stop: function (value) {
            console.log(value, "stop19");
            _this.isMoving = false;
            _this.setOperate(4);
          },
          index: 19,
        },
        {
          pass: function (value) {
            console.log(value, "pass20");
          },
          stop: function (value) {
            console.log(value, "stop20");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[20];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 20,
        },
        {
          pass: function (value) {
            console.log(value, "pass21");
          },
          stop: function (value) {
            console.log(value, "stop21");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[21];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 21,
        },
        {
          pass: function (value) {
            console.log(value, "pass22");
          },
          stop: function (value) {
            console.log(value, "stop22");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[22];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 22,
        },
        {
          pass: function (value) {
            console.log(value, "pass23");
          },
          stop: function (value) {
            console.log(value, "stop23");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[23];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 23,
        },
        {
          pass: function (value) {
            console.log(value, "pass24");
          },
          stop: function (value) {
            console.log(value, "stop24");
            _this.isMoving = false;
            _this.setOperate(5);
          },
          index: 24,
        },
        {
          pass: function (value) {
            console.log(value, "pass25");
          },
          stop: function (value) {
            console.log(value, "stop25");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[25];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 25,
        },
        {
          pass: function (value) {
            console.log(value, "pass26");
          },
          stop: function (value) {
            console.log(value, "stop26");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[26];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 26,
        },
        {
          pass: function (value) {
            console.log(value, "pass27");
          },
          stop: function (value) {
            console.log(value, "stop27");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[27];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 27,
        },
        {
          pass: function (value) {
            console.log(value, "pass28");
          },
          stop: function (value) {
            console.log(value, "stop28");
            _this.isMoving = false;
            _this.setOperate(4);
          },
          index: 28,
        },
        {
          pass: function (value) {
            console.log(value, "pass29");
          },
          stop: function (value) {
            console.log(value, "stop29");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[29];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 29,
        },
        {
          pass: function (value) {
            console.log(value, "pass30");
          },
          stop: function (value) {
            console.log(value, "stop30");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[30];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 30,
        },
        {
          pass: function (value) {
            console.log(value, "pass31");
          },
          stop: function (value) {
            console.log(value, "stop31");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[31];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 31,
        },
        {
          pass: function (value) {
            console.log(value, "pass32");
          },
          stop: function (value) {
            console.log(value, "stop32");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[32];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 32,
        },
        {
          pass: function (value) {
            console.log(value, "pass33");
          },
          stop: function (value) {
            console.log(value, "stop33");
            _this.isMoving = false;
            _this.setOperate(5);
          },
          index: 33,
        },
        {
          pass: function (value) {
            console.log(value, "pass34");
          },
          stop: function (value) {
            console.log(value, "stop34");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[34];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 34,
        },
        {
          pass: function (value) {
            console.log(value, "pass35");
          },
          stop: function (value) {
            console.log(value, "stop35");
            let player = _this.playerContral[_this.gameInfo.player_id];
            let land = _this.mapDataList[35];
            _this.isMoving = false;
            if (land.holder == 4) {
              console.log("购买");
              _this.setOperate(1);
            } else if (land.holder == player.id) {
              console.log("升级");
              _this.setOperate(2);
            } else {
              console.log("缴钱/攻城");
              _this.setOperate(3);
            }
          },
          index: 35,
        },
      ],
      //地图绘制基本数据
      mapList: [],
      //地图数据
      mapDataList: [
        {
          address_id: 0, //地点编号
          address_name: "洛阳", //地点名称
          land_image: "icon-capital", //图片
          type: "capital", //地点类型 capital首都/shop集市/city城市/taking求贤/battlefield战场/wall关卡
          price: 10000, //价格
          level: 0, //等级
          upGradation: [10000], //升级费用
          tax: [5000], //税收/过路费
          tag: "", //标签
          def: [6], //城防
          holder: 4, //持有者0~3玩家，4国库
          hero_1: null, // 太守id
          hero_2: null, // 军师id
        },
        {
          address_id: 1,
          address_name: "计略所",
          land_image: "icon-guoxueku",
          type: "shop",
        },
        {
          address_id: 2,
          address_name: "濮阳",
          land_image: "icon-city",
          type: "city",
          price: 6000,
          level: 0,
          upGradation: [2000],
          tax: [5000],
          tag: "",
          def: [6],
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "襄阳",
          land_image: "icon-city",
          type: "city",
          address_id: 3,
          price: 6000,
          level: 0,
          upGradation: [2000, 6000, 18000, 54000],
          tax: [2000, 6000, 18000, 54000, 162000],
          def: [6, 7, 8, 9, 10],
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "新野",
          land_image: "icon-city",
          type: "city",
          address_id: 4,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "许昌",
          land_image: "icon-city",
          type: "city",
          address_id: 5,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "求贤",
          land_image: "icon-friends",
          type: "taking",
          address_id: 6,
        },
        {
          address_name: "官渡",
          land_image: "icon-war-flag",
          type: "battlefield",
          address_id: 7,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "剑门关",
          land_image: "icon-wall",
          type: "wall",
          address_id: 8,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },

        //-------------------------------------------
        {
          address_name: "成都",
          address_id: 9,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "计略所",
          land_image: "icon-guoxueku",
          type: "shop",
          address_id: 10,
        },
        {
          address_name: "长沙",
          land_image: "icon-city",
          type: "city",
          address_id: 11,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "西凉",
          land_image: "icon-city",
          type: "city",
          address_id: 12,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "江夏",
          land_image: "icon-city",
          type: "city",
          address_id: 13,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "汉中",
          land_image: "icon-city",
          type: "city",
          address_id: 14,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "求贤",
          land_image: "icon-friends",
          type: "taking",
          address_id: 15,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "夷陵",
          land_image: "icon-war-flag",
          type: "battlefield",
          address_id: 16,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "濡须口",
          land_image: "icon-wall",
          type: "wall",
          address_id: 17,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        //--------------------------
        {
          address_name: "建业",
          address_id: 18,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "计略所",
          land_image: "icon-guoxueku",
          type: "shop",
          address_id: 19,
        },
        {
          address_name: "江陵",
          land_image: "icon-city",
          type: 1,
          address_id: 20,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "寿春",
          land_image: "icon-city",
          type: "city",
          address_id: 21,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "下邳",
          land_image: "icon-city",
          type: "city",
          address_id: 22,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "柴桑",
          land_image: "icon-city",
          type: "city",
          address_id: 23,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "求贤",
          land_image: "icon-friends",
          type: "taking",
          address_id: 24,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "赤壁",
          land_image: "icon-war-flag",
          type: "battlefield",
          address_id: 25,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "潼关",
          land_image: "icon-wall",
          type: "wall",
          address_id: 26,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        //-------------------
        {
          address_name: "长安",
          address_id: 27,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "计略所",
          land_image: "icon-guoxueku",
          type: "shop",
          address_id: 28,
        },
        {
          address_name: "邺城",
          land_image: "icon-city",
          type: "city",
          address_id: 29,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "南皮",
          land_image: "icon-city",
          type: "city",
          address_id: 30,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "平原",
          land_image: "icon-city",
          type: "city",
          address_id: 31,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "北平",
          land_image: "icon-city",
          type: "city",
          address_id: 32,
          price: 10000,
          level: 0,
          upGradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "求贤",
          land_image: "icon-friends",
          type: "taking",
          address_id: 33,
        },
        {
          address_name: "合肥",
          land_image: "icon-war-flag",
          type: "battlefield",
          address_id: 34,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
        {
          address_name: "虎牢关",
          land_image: "icon-wall",
          type: "wall",
          address_id: 35,
          price: 10000,
          level: 0,
          upGradation: [10000],
          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          hero_1: null,
          hero_2: null,
        },
      ],
      //-------------参数---------------------
      child: {
        id: 999,
        name: "稻草人",
        pow: 1,
        int: 1,
        salary: 9999,
        type: "normal",
        tactic_name: "恐惧",
        stratagem_name: "夜割",
        politics_name: "群鸦风暴",
        image: "icon-child",
        tactic_desc:
          "被动：在非战斗状态下且未被敌人看到时，如果用一个技能对敌人造成了伤害，那么会使该敌人恐惧1/1.25/1.5/1.75/2秒。主动：恐惧一个目标1/1.25/1.5/1.75/2秒并造成相当于目标6/7/8/9/10%（+1%每50法强）当前生命值（最小值：40/60/80/100/120）的魔法伤害。如果目标近期被恐惧过，那么则会转而造成相当于目标12/14/16/18/20%（+2%每50法强）当前生命值（最小值：80/120/160/200/240）的魔法伤害。对野怪的最大伤害值为400。如果费德提克在冒充成【草间人】（原地站立2秒）期间施放技能，将会恐惧敌人。",
        stratagem_desc:
          "释放黑魔法至目标位置，在一个新月形区域内造成70/105/140/175/210（+0.5AP）魔法伤害和持续1.25秒的30/35/40/45/50%减速效果。新月中央的敌人们在减速期间还会被沉默。",
        politics_desc:
          "引导1.5秒，然后闪烁到目标地点，同时释放出成群的杀人鸦，每秒对范围内的所有敌方单位造成125/225/325（+0.45AP）魔法伤害。此效果持续5秒，最多造成625/1125/1625（+2.25AP）总魔法伤害。",
      },
      showHover: null, //悬浮详情
      loading: false,
      showMenu: false, //展示菜单
      showBattle: false, //展示战斗界面
      isMoved: false, //已移动
      isMoving: false,
      playerContral: [
        {
          id: 0, //玩家id=索引
          name: "0号玩家", //玩家姓名
          avatar: "001", //头像
          money: 0, //金钱
          general: [], //武将
          land: [], //城池
          stratagem: [], //计谋
          command: [], //指挥
          address: 0, //位置
          capital: 0, //首都
        },
        {
          id: 1,
          name: "1号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 9,
          capital: 9,
        },
        {
          id: 2,
          name: "2号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 18,
          capital: 18,
        },
        {
          id: 3,
          name: "3号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 27,
          capital: 27,
        },
      ],
      diceValue: 1, //骰子点数
      gameStartSetting: {
        // 开局配置
        game_start: false,
        player_num: 2,
        start_money: 30000,
      },
      //当前游戏数据
      gameInfo: {
        player_id: 0, //当前玩家id
        historyInfo: [{ str: "游戏开始" }],
      },
      colorList: ["#67C23A", "#E6A23C", "#F56C6C", "#909399"], //颜色
      operateList: [
        {
          name: "购买城池",
          status: 2,
          operateVal: 1,
        },
        {
          name: "升级！",
          status: 2,
          operateVal: 2,
        },
        {
          name: "缴钱",
          status: 2,
          operateVal: 3,
        },
        {
          name: "攻城",
          status: 2,
          operateVal: 4,
        },
        {
          name: "求策",
          status: 2,
          operateVal: 5,
        },
        {
          name: "求贤",
          status: 2,
          operateVal: 6,
        },

        {
          name: "税收",
          status: 2,
          operateVal: 7,
        },
        {
          name: "配置武将",
          status: 2,
          operateVal: 8,
        },
        {
          name: "结束",
          status: 2,
          operateVal: 99,
        },
      ],
      list_1: [
        { id: 1, name: 1 },
        { id: 2, name: 2 },
        { id: 3, name: 3 },
        { id: 4, name: 4 },
        { id: 5, name: 5 },
        { id: 6, name: 6 },
      ],
      list_2: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      list_3: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      // generalList: [],
      // stratagemList: [],
      // commandList: [],
      // cardsList: [],
      /**
       * 玩家数据
       * id 玩家id
       * name 姓名
       * avatar 头像
       * money 资产
       * general 武将
       * land 城池
       * stratagem 计谋
       * command 指挥
       * address 地点
       * politics 政治-hero_1 主帅/hero_2 军师/politics 政策
       * capital 首都-0洛阳/9成都/18建业/27长安
       */
    };
  },
  watch: {},
  computed: {
    diceImage() {
      switch (this.diceValue) {
        case 0:
          return require("@/assets/dice/1.jpg");
        case 1:
          return require("@/assets/dice/1.jpg");
        case 2:
          return require("@/assets/dice/2.jpg");
        case 3:
          return require("@/assets/dice/3.jpg");
        case 4:
          return require("@/assets/dice/4.jpg");
        case 5:
          return require("@/assets/dice/5.jpg");
        case 6:
          return require("@/assets/dice/6.jpg");
      }
    },
  },
  methods: {
    init() {
      // 设置画布
      this.createMap();
      //弹出游戏菜单
      this.showMenu = true;
      // this.showBattle = true;
    },
    createMap() {
      let land = this.mapDataList;
      this.mapConfig.size = window.innerHeight - 80;
      this.mapConfig.width = window.innerWidth;
      this.mapConfig.height = window.innerHeight;
      this.mapConfig.cube = (window.innerHeight - 80) / 10;
      // 绘制地棋盘
      for (var i = 0; i < land.length; i++) {
        const currentMapDataList = land;
        const currentMapFunctionList = this.mapFunctionList;
        if (i < 9) {
          let { address_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            address_id: i,
            size: this.mapConfig.cube,
            top: 0,
            left: this.mapConfig.cube * i,
            address_name,
            land_image,
            land_type,
            pass,
            stop,
            cardDetail: {
              id: "001",
              name: address_name,
              //费用
              // cost: "red,blue,blue",
              cost: "red,blue,blue,green,blue,white,black",
              //标签
              tag_1: "水、恶",
              tag_2: "忍者宝可梦",
              //系列
              type_icon: "ninjia2",
              desc: "甲贺忍蛙的形态为双足大蛙，身体及双腿为深蓝色，胸部为黄色。四肢各有大白泡，腿上各有一个四角星型标记，看起来像手里剑。前肢有三指，后肢有两指，脚上有蹼。面孔下部和尖尖耳朵为浅黄色，眼睛上方有白斑，眼睛里有白巩膜、红虹膜和白瞳孔，围着颈子的粉红“围巾”是它的舌头。",
              attack: Math.floor(Math.random() * 10),
              defense: Math.floor(Math.random() * 10),
              level: Math.floor(Math.random() * 4),
              mainImg: "ex",
            },
          });
        } else if (i < 19) {
          let { address_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            address_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * (i - 9),
            left: this.mapConfig.cube * 9,
            address_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        } else if (i < 28) {
          let { address_name, land_image, land_type } = currentMapDataList[i];
          let { pass } = currentMapFunctionList[i];
          this.mapList.push({
            address_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * 9,
            left: this.mapConfig.cube * (27 - i),
            address_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        } else {
          let { address_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            address_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * (36 - i),
            left: 0,
            address_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        }
      }
      //格子悬浮展示
      for (var i = 0; i < 36; i++) {
        if (i < 14) {
          this.mapList[i].hoverStyle = {
            top: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
          };
        } else if (i < 32) {
          this.mapList[i].hoverStyle = {
            top: `-${this.mapConfig.cube * 3.8}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
          };
        } else {
          this.mapList[i].hoverStyle = {
            top: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
          };
        }
      }
    },
    centerStyle() {
      let size = this.mapConfig.size;
      let cube = this.mapConfig.cube;
      let style = {
        width: cube * 8 - 40 + "px",
        height: cube * 8 - 40 + "px",
        padding: cube + 20 + "px",
      };
      return style;
    },
    getPlayerStyleByItem(item) {
      let address = this.getAddress(item.address);
      const mapxy = this.mapList[address];
      let cubeSize = this.mapConfig.cube / 2 - 10;
      let player_id = item.id;
      let color = this.colorList[item.id];
      let style = {
        background: color,
        top:
          mapxy.top +
          40 +
          cubeSize * (player_id > 1 ? 1 : 0) +
          5 * (player_id > 1 ? 2 : 1) +
          "px",
        left:
          mapxy.left +
          40 +
          cubeSize * (player_id % 2 ? 1 : 0) +
          5 * (player_id % 2 ? 2 : 1) +
          "px",
        width: cubeSize + "px",
        height: cubeSize + "px",
        "border-radius": cubeSize + "px",
        "line-height": cubeSize + "px",
      };
      return style;
    },
    getAddress(address) {
      return address % 36;
    },
    clickSelectBtn(type, value) {
      console.log(type);
      switch (type) {
        case 1:
          this.gameStartSetting.player_num = value;
          break;
        case 2:
          this.gameStartSetting.start_money = value;
          break;
      }
      this.$forceUpdate();
    },
    async gameStart() {
      resetList();
      /**设置玩家初始配置
       * 首都（出生点）
       * 金钱
       * 武将卡（随机10）
       * 计谋卡（基础）
       * 指挥卡（基础）
       */
      let allPlayer = [
        {
          id: 0, //玩家id=索引
          name: "0号玩家", //玩家姓名
          avatar: "001", //头像
          money: 0, //金钱
          general: [], //武将
          land: [], //城池
          stratagem: [], //计谋
          command: [], //指挥
          address: 0, //位置
          capital: 0, //首都
        },
        {
          id: 1,
          name: "1号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 9,
          capital: 9,
        },
        {
          id: 2,
          name: "2号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 18,
          capital: 18,
        },
        {
          id: 3,
          name: "3号玩家",
          avatar: "002",
          money: 0,
          general: [],
          land: [],
          stratagem: [],
          command: [],
          address: 27,
          capital: 27,
        },
      ];
      let resPlayer = [];
      resPlayer = allPlayer.slice(0, this.gameStartSetting.player_num);
      if (this.gameStartSetting.player_num == 2) {
        resPlayer[1].address = 18;
        resPlayer[1].capital = 18;
        this.mapDataList[0].holder = 0;
        this.mapDataList[18].holder = 1;
      } else {
        this.mapDataList[0].holder = 0;
        this.mapDataList[9].holder = 1;
        this.mapDataList[18].holder = 2;
        this.mapDataList[27].holder = 3;
      }
      //抽武将//基础计谋//基础指挥
      await resPlayer.forEach((ex) => {
        ex.general = drawCard(3, 1);
        ex.stratagem = setBaseCard(2);
        ex.command = setBaseCard(3);
        ex.money = this.gameStartSetting.start_money;
        ex.land.push(ex.capital);
      });
      this.playerContral = JSON.parse(JSON.stringify(resPlayer));
      console.log("playerContral", this.playerContral);
      this.showMenu = false;
    },
    async handlerMove() {
      if (this.isMoved) return;
      this.isMoved = true;
      let min = Math.ceil(1);
      let max = Math.floor(6);
      let res = Math.floor(Math.random() * (max - min + 1)) + min;
      let step = 0;
      let add = 1;
      let speed = 10;
      let wait = () =>
        new Promise((resolve, reject) => {
          setTimeout(resolve, speed);
        });
      this.diceValue = 0;
      do {
        await wait();
        if (this.diceValue == 6) {
          add = -1;
        }
        if (this.diceValue == 0) {
          add = 1;
        }
        this.diceValue += add;
        step++;
        speed += (step * step) / 800;
      } while (this.diceValue != Math.ceil(res) || step < 50);
      await this.moving(res);
      // this.isMoved = false;
    },
    async moving(step, speed = 500) {
      console.log(step, "开始移动");
      this.isMoving = true;
      let wait = () =>
        new Promise((resolve, reject) => {
          setTimeout(resolve, speed);
        });
      for (let i = 0; i < step; i++) {
        await wait();
        //移动
        this.playerContral.forEach((el) => {
          if (el.id == this.gameInfo.player_id) {
            if (!this.isMoving) return;
            el.address++;
            //触发事件
            // 经过
            if (i < step - 1) {
              console.log(i, step, "经过");
              this.mapFunctionList[el.address % 36].pass();
            }
            // 停留
            else if (i == step - 1) {
              console.log(i, step, "停留");
              this.mapFunctionList[el.address % 36].stop();
            }

            // if (i == step - 1 && this.mapFunctionList[newAddress].stop) {
            //   this.mapFunctionList[newAddress].stop(null);
            // } else if (this.mapFunctionList[newAddress].pass) {
            //  this. mapFunctionList[newAddress].pass(null);
            // }
          }
        });
      }
    },
    nextPlayer() {
      console.log("_this.nextPlayer");
      this.isMoving = false;
      this.isMoved = false;
      this.setOperate(0);
      let nextPlayer_id =
        (this.gameInfo.player_id + 1) % this.gameStartSetting.player_num;
      this.gameInfo.player_id = nextPlayer_id;
    },
    // 展示城池名称
    getLandStr(array) {
      let resStr = "";
      this.mapDataList.forEach((el) => {
        if (array.includes(el.address_id)) {
          if (resStr) {
            resStr += "、" + el.address_name;
          } else {
            resStr += el.address_name;
          }
        }
      });
      return resStr;
    },
    // 展示武将名称
    getStr_1(array = []) {
      let resStr = "";
      let allList = queryListAll(1);
      allList.forEach((el) => {
        if (array.includes(el.id)) {
          if (resStr) {
            resStr += "、" + el.name;
          } else {
            resStr += el.name;
          }
        }
      });
      console.log();

      return resStr;
    },
    // 展示计谋名称
    getStr_2(array = []) {
      let resStr = "";
      let allList = queryListAll(2);
      allList.forEach((el) => {
        if (array.includes(el.id)) {
          if (resStr) {
            resStr += "、" + el.name;
          } else {
            resStr += el.name;
          }
        }
      });
      return resStr;
    },
    //展示指挥卡
    getStr_3(array = []) {
      let resStr = "";
      let allList = queryListAll(3);
      allList.forEach((el) => {
        if (array.includes(el.id)) {
          if (resStr) {
            resStr += "、" + el.name;
          } else {
            resStr += el.name;
          }
        }
      });
      return resStr;
    },
    setOperate(scene) {
      switch (scene) {
        //初始化
        case 0:
          this.operateList[0].status = 2;
          this.operateList[1].status = 2;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 2;
          this.operateList[5].status = 2;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 2;
          break;
        //购买
        case 1:
          this.operateList[0].status = 1;
          this.operateList[1].status = 2;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 2;
          this.operateList[5].status = 2;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 1;
          break;
        //升级
        case 2:
          this.operateList[0].status = 2;
          this.operateList[1].status = 1;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 2;
          this.operateList[5].status = 2;
          this.operateList[6].status = 1;
          this.operateList[7].status = 1;
          this.operateList[8].status = 1;
          break;
        //缴钱/攻城
        case 3:
          this.operateList[0].status = 2;
          this.operateList[1].status = 2;
          this.operateList[2].status = 1;
          this.operateList[3].status = 1;
          this.operateList[4].status = 2;
          this.operateList[5].status = 2;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 2;
          break;
        //求策
        case 4:
          this.operateList[0].status = 2;
          this.operateList[1].status = 2;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 1;
          this.operateList[5].status = 2;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 1;
          break;
        //求贤
        case 5:
          this.operateList[0].status = 2;
          this.operateList[1].status = 2;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 2;
          this.operateList[5].status = 1;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 1;
          break;
        //结束
        case 99:
          this.operateList[0].status = 2;
          this.operateList[1].status = 2;
          this.operateList[2].status = 2;
          this.operateList[3].status = 2;
          this.operateList[4].status = 2;
          this.operateList[5].status = 2;
          this.operateList[6].status = 2;
          this.operateList[7].status = 2;
          this.operateList[8].status = 1;
          break;
      }
    },
    handlerClickOperateBtn(item) {
      if (item.status == 2) return;
      let player = this.playerContral[this.gameInfo.player_id];
      let land = this.mapDataList[player.address % 36].address_id;
      switch (item.operateVal) {
        case 1:
          //购买
          this.buyCountry(land, player.id);
          break;
        case 2:
          // 升级
          this.updateCountry(land, player.id);
          break;
        case 3:
          //缴钱
          this.payMoney(land, player.id);
          break;
        case 4:
          //攻城
          this.attack(land, player.id);
          break;
        case 5:
          //求贤
          this.attack(land, player.id);
          break;
        case 6:
          //求策
          this.attack(land, player.id);
          break;
        case 7:
          //税收
          this.attack(land, player.id);
          break;
        case 8:
          //配置武将
          this.attack(land, player.id);
          break;
        case 99:
          //结束
          this.nextPlayer();
          break;
        default:
          break;
      }
    },
    //购买城池
    buyCountry(land_id, player_id) {
      console.log("购买", land_id, player_id);
      let price = this.mapDataList[land_id].price;
      if (this.playerContral[player_id].money < price) {
        alert("钱不够");
        return;
      }
      this.playerContral[player_id].money -= price;
      this.playerContral[player_id].land.push(land_id);
      this.mapDataList[land_id].holder = player_id;
      // this.setOperate(99);
      this.nextPlayer();
    },
    //升级城池
    updateCountry(land_id, player_id) {
      let land = this.mapDataList[land_id];
      if (land.level + 1 == land.tax.length) {
        alert("当前城市已经满级");
        this.setOperate(99);
        return;
      }
      // let price = land.tax[land.level];
      console.log("升级", land_id, player_id);
      let price = land.upGradation[land.level];
      if (this.playerContral[player_id].money < price) {
        alert("钱不够");
        this.setOperate(99);
        return;
      }
      this.playerContral[player_id].money -= price;
      // this.playerContral[player_id].land.push(land_id);
      this.mapDataList[land_id].level++;
      console.log(this.mapDataList);
      // this.setOperate(99);
      this.nextPlayer();
    },
    //支付路费
    payMoney(land_id, player_id) {
      let land = this.mapDataList[land_id];
      let price = land.tax[land.level];
      if (this.playerContral[player_id].money < price) {
        alert("钱不够");
        return;
      }
      this.playerContral[player_id].money -= price;
      this.playerContral[land.holder].money += price;
      this.setOperate(99);
    },
    //发起进攻
    attack(land_id, player_id) {
      this.showBattle = true;
      this.setOperate(99);
    },
  },
};
</script>
<style scoped lang="less">
body {
  box-sizing: border-box;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .camera {
    margin: 40px;
    z-index: 1;
    .map {
      position: relative;
      z-index: 1;

      //   margin: 20px;
      .map-cube {
        position: absolute;
        border: 0.5px solid #000;
        .map-hover {
          border: 0.5px solid #000;
          position: absolute;
          background-color: #fff;
          z-index: 2;
        }
      }
    }
    .center-box {
      background-color: #f7ccd2;
      border: 1px solid #000;

      .center-inner-box {
        border: 4px solid #000;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        padding: 40px;
        overflow-y: scroll;
        word-break: break-all;
        .center-item {
          // margin: 0 auto;
          text-align: start;
        }
      }
      .center-inner-box::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .ui-box {
    box-sizing: border-box;
    position: absolute;
    // background-color: #f9eaea;
    background: radial-gradient(circle at 50% 25%, #adacac, rgb(51, 51, 51));
    border-radius: 20px;
    border: 2px solid rgb(51, 51, 51);
    top: 20px;
    right: 20px;
    bottom: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    .player-box {
      display: flex;
      padding: 10px;
      min-height: 200px;
      margin-bottom: 20px;
      background-color: #caf9fa;
      border-radius: 20px;
      text-align: start;
      .left-side {
        .navbar {
          display: flex;
          .avatar-box {
            margin: 0 0;
            width: 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 80px;
            border: 4px solid #a3a3a3;
            background-color: #ffffff;
            .avatar {
              width: 100%;
              height: 100%;
            }
          }
          .name-box {
            height: 60px;
            width: 180px;
            background-color: #f44444;
            margin: auto 0 auto 20px;
            border-radius: 30px;
            border: 4px solid #bdbdbd;
            line-height: 60px;
            text-align: center;
            font-size: 32px;
            color: #fff;
            font-weight: 500;
          }
        }

        .info-box {
          box-sizing: border-box;
          border: 1px solid #000;
          border-radius: 10px;
          width: 500px;
          height: 200px;
          margin: 10px 20px;
          padding: 10px;
          // display: flex;
          // flex-direction: column;
          // justify-content: center;
          // text-align: center;
          // align-items: center;
          .nb {
            border: none !important;
            box-shadow: none !important;
            height: 24px;
            width: calc(100% - 40px);
            margin: 10px;
            transform: skew(-20deg);
            transform-origin: bottom right;
            justify-content: space-around;
            display: flex;
            .info-item-item {
              box-sizing: border-box;
              text-align: center;
              border: 1px solid #000;
              height: 30px;
              display: inline-block;
              padding: 5px 20px;

              border: none;
              border-radius: 5px;
              cursor: pointer;
              box-shadow: 0 2px 2px #999,
                /* Top shadow */ 0 2px 2px rgba(0, 0, 0, 0.75),
                /* Bottom shadow */ 2px 2px rgba(0, 0, 0, 0.75); /* Inner shadow */
              text-align: center;
              transition: box-shadow 0.5s ease; /* Animation */
            }
            .info-item-item:hover {
              box-shadow: 0 3px 2px #999,
                /* Top shadow */ 0 5px 5px rgba(0, 0, 0, 0.75),
                /* Bottom shadow */ 2px 5px 5px rgba(0, 0, 0, 0.75); /* Inner shadow */
            }
            .color_1 {
              background-color: #4caf50;
              color: white;
            }
            .color_1:hover {
              background-color: red;
            }
            .color_2 {
              background-color: #e6a23c;
              color: white;
            }
            .color_2:hover {
              background-color: red;
            }
            .color_3 {
              background-color: #f56c6c;
              color: white;
            }
            .color_3:hover {
              background-color: red;
            }
            .color_4 {
              background-color: #409eff;
              color: white;
            }
            .color_4:hover {
              background-color: red;
            }
          }
          .info-item {
            height: 24px;
            width: calc(100% - 40px);
            margin: 10px;
            border: 1px solid #000;
            transform: skew(-20deg);
            transform-origin: bottom right;
            justify-content: space-around;
            display: flex;
            color: white;
            border-radius: 5px;
            background-color: #6eb0ee;
            box-shadow: 0 2px 2px #fc4242,
              /* Top shadow */ 0 2px 2px rgba(0, 0, 0, 0.75),
              /* Bottom shadow */ 2px 2px rgba(0, 0, 0, 0.75); /* Inner shadow */
            transition: box-shadow 0.5s ease; /* Animation */
          }
          .hvbtn {
            cursor: pointer;
            background-color: #2f4ae5;
          }
          .hvbtn:hover {
            background-color: red;
            box-shadow: 0 3px 2p x #999,
              /* Top shadow */ 0 5px 5px rgba(0, 0, 0, 0.75),
              /* Bottom shadow */ 2px 5px 5px rgba(0, 0, 0, 0.75); /* Inner shadow */
          }
        }
      }
      .right-side {
        flex: 1;
        .operate-box {
          // border: 2px solid #000;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          flex-wrap: wrap;
          .operate-item {
            border-radius: 10px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: none;
            color: white;
            padding: 5px 12px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 6px 14px;
            cursor: pointer;
            transition: background 0.3s ease; /* 背景过渡效果 */
          }
          .actived-btn {
            background: linear-gradient(
              to right,
              #feb47b,
              #ff7e5f
            ); /* 从左到右的渐变 */
          }
          .disabled-btn {
            background: #d2d2d2;
            cursor: url("../../assets/monopoly/ban.png"), auto;
          }
          .actived-btn:hover {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
          }
          // .disabled-btn:hover {
          //   background: #d2d2d2; /* 从左到右的渐变 */
          //   // cursor: 1;
          // }
        }
      }
    }
    .dice-box {
      border-radius: 20px;
      width: 100px;
      height: 60px;
      display: flex;
      background-color: #fff;
      margin: 20px;
      .dice-img {
        width: 40px;
        height: 40px;
        margin: auto;
        cursor: pointer;
      }
      @keyframes shake {
        0% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(-10deg);
        }
        50% {
          transform: rotate(2deg);
        }
        75% {
          transform: rotate(-2deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
      .dice-img:hover {
        animation: shake 0.5s infinite; /* Adjust duration and timing as needed */
      }
      .step {
        height: 60px;
        line-height: 60px;
      }
    }
  }
}
.cube-box {
  width: 100%;
  height: 100%;
  background-color: #bef0d3;
  .title {
    height: 40%;
  }
  .cube {
    font-size: 32px;
  }
  .content {
  }
}
.menu-box {
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .menu-item {
    width: 600px;
    height: 400px;
    background-color: #fff;
    border-radius: 8px;
    margin: 100px auto 0 auto;
    padding: 50px 100px 0 100px;
    .item-li {
      display: flex;
      .li-title {
        width: 120px;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        font-weight: bolder;
        color: #e0e5ff;
        background-color: #404ff0;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
        border: 4px solid rgba(0, 0, 0, 0);
        border-radius: 6px;
        margin-right: 20px;
        cursor: pointer;
      }
      .li-select {
        width: 120px;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        font-weight: bolder;
        color: #e0e5ff;
        background-color: #858ff8;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
        border: 4px solid rgba(0, 0, 0, 0);
        border-radius: 6px;
        margin-right: 20px;
        cursor: pointer;
      }
      .li-select:hover {
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5),
          -4px -4px 10px rgba(255, 255, 255, 0.5);
        /* 鼠标悬停时增加阴影强度 */
      }
      .li-select.selected {
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 1),
          -4px -4px 10px rgba(255, 255, 255, 0.5);
        border: 4px solid #ff0000;
      }
    }
    .start-btn {
      width: 180px;
      height: 120px;
      border-radius: 10px;
      background-color: #b15d23;
      margin: 100px auto 0 auto;
      color: #ffffff;
      font-size: 40px;
      line-height: 120px;
      font-weight: bolder;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 1),
        -4px -4px 10px rgba(255, 255, 255, 1);
      cursor: pointer;
    }
    .start-btn:hover {
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5),
        -4px -4px 10px rgba(255, 255, 255, 0.5);
      /* 鼠标悬停时增加阴影强度 */
    }
  }
}
.player {
  background: rgba(236, 249, 255, 0.8);
  // font-size: 14px;
  color: #ffffff;
  font-weight: bolder;
  padding: 2px;
  z-index: 3;
  position: absolute;
  border: 2px solid #ffffff;
}
.showcard-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .navbar {
    width: 100%;
    height: 50px;
    background: #e0e5ff;
    line-height: 50px;
    color: #fff;
    padding: 20px 0 20px 40px;
    display: flex;
    justify-content: space-between;
  }
  .main {
    width: 100%;
    background-color: #daffe0;
    flex: 1;
    display: flex;
    .beside {
      width: 20vh;
      background-color: #fa9393;
    }
    .content {
      overflow: scroll;
      height: calc(80vh - 80px);
      width: 100%;
      padding: 60px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
      // grid-template-rows: repeat(auto-fill, minmax(260px, 1fr));
      .cards {
        position: relative;
        .top {
          height: 15%;
          border: 2px solid #000000;
          border-top-right-radius: 6px;
          border-top-left-radius: 6px;
          display: flex;
          justify-content: space-between;
          .name {
            flex: 1;
          }
          .cost {
            display: inline-block;
            border-left: 2px solid #000000;
            align-self: center;
            min-width: 60px;
          }
        }
        .mid {
          height: 35%;
          border: 2px solid #000000;
          text-align: start;
          padding: 0 10px;
        }
        .bottom {
          text-align: start;
          height: calc(50% - 10px);
          border: 2px solid #000000;
          padding: 0 10px;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;

          font-size: 20px;
        }
        .map-hover {
          border: 2px solid #737373;
          position: absolute;
          background-color: #e9c1c1;
          z-index: 4;
          width: 100%;
          height: 40%;
          top: 70%;
          border-radius: 6px;
          text-align: start;
          padding: 10px;

          font-size: 20px;
        }
      }
      .scale:hover {
        z-index: 4;
        transform: scale(1.2);
      }
    }
    .content::-webkit-scrollbar {
      display: none;
    }
  }
}
#file::file-selector-button {
  padding: 6px 10px;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
}
#file {
  font-size: 0;
}
.pop-box {
  display: flex;
  height: 100px;
  padding: 0 40px;
  .title {
    height: 100px;
    line-height: 100px;
  }
}
.battle-box {
  position: absolute;
  background-color: rgb(97, 186, 241);
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  .battle-item {
    margin: 10px;
    background-color: #fff;
    border-radius: 20px;
  }
  .item-1 {
    width: 240px;
    padding: 20px;
  }
  .item-2 {
    width: 400px;
    padding: 20px;
  }
  .card-1 {
    width: 225px;
    height: 300px;
    border: 4px solid #000000;
    border-radius: 10px;
  }
  .card-1 + .card-1 {
    margin-top: 20px;
  }
  .card-2 {
    width: 140px;
    height: 180px;
    border: 4px solid #000000;
    border-radius: 10px;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    justify-content: space-around;
  }
  .card-list {
    justify-content: space-around;
  }
  .battle-set {
    flex: 1;
    margin: 10px;
    background-color: #fff;
    border-radius: 20px;
    .set-list-1 {
      position: relative;
      width: 800px;
      height: 180px;
      border: 4px solid #000000;
      border-radius: 20px;
      margin: 8px;
      padding: 10px;
      overflow-x: scroll;
      white-space: nowrap;
      .card {
        width: 100px;
        height: 140px;
        display: inline-block;
        border: 4px solid #000000;
        border-radius: 10px;
        word-wrap: none;
      }
      .card + .card {
        margin-left: 10px;
      }
      .list-title {
        width: 60px;
        height: 170px;
        text-align: center;
        line-height: 60px;
        background-color: #ff0000;
        position: fixed;
        border-radius: 12px;
        right: 20px;
        z-index: 2;
        color: #ffffff;
        font-weight: bolder;
        writing-mode: vertical-rl; /* 从右到左的竖排文本 */
        /* 或者使用 writing-mode: vertical-lr; 从左到右的竖排文本 */
        text-orientation: upright; /* 确保文本是直立的，而不是倾斜的 */
      }
    }
    .set-list-1 :last-child {
      margin-right: 60px;
    }
    // .set-list-1::-webkit-scrollbar {
    //   display: none;
    // }
  }
}
</style>
